<ng-container [ngSwitch]="contentMode">
  <!-- 上传区 -->
  <div class="lv-fileupload-body">
    <!-- 拖拽 -->
    <ng-container *ngSwitchCase="uploadContentMode.DRAG">
      <div class="lv-fileupload-draggable">
        <div
          class="lv-fileupload-drag"
          [lv-tooltip]="fileLimitTip"
          [ngClass]="{ 'lv-fileupload-drag-disabled': lvDisabled, 'lv-fileupload-drag-active': isDragIn }"
          (dragover)="_onFileDragover($event)"
          (dragleave)="_onFileDragleave($event)"
          (drop)="_onFileDrop($event)"
          (click)="selectFile($event)"
        >
          <i lv-icon="lv-icon-select-file"></i>
          <div class="lv-fileupload-description">{{ 'uploadDragOrClickTip' | i18n }}</div>
          <!-- 帮助文本 -->
          <ng-container [ngSwitch]="true">
            <div class="lv-fileupload-text" *ngSwitchCase="TypeUtils.isRealString(helpText)">{{ helpText }}</div>
            <ng-container *ngSwitchCase="TypeUtils.isTemplateRef(helpText)">
              <ng-container *ngTemplateOutlet="helpText"></ng-container>
            </ng-container>
          </ng-container>
        </div>
        <ng-container *ngTemplateOutlet="fileList"></ng-container>
      </div>
    </ng-container>

    <!-- 图片 -->
    <ng-container *ngSwitchCase="uploadContentMode.PICTURE">
      <div class="lv-fileupload-picture">
        <ng-container *ngTemplateOutlet="pictureFileList"></ng-container>
        <div
          [lv-tooltip]="fileLimitTip"
          class="lv-fileupload-picture-trigger"
          [ngClass]="{ 'lv-fileupload-picture-trigger-disabled': lvDisabled }"
          (click)="selectFile($event)"
        >
          <div class="lv-fileupload-picture-trigger-container">
            <button lv-button [disabled]="lvDisabled" class="lv-fileupload-picture-trigger-select">
              <i lv-icon="lv-icon-upload-image"></i>
            </button>
          </div>
        </div>
      </div>
    </ng-container>
    <!-- 自定义 -->
    <ng-container *ngSwitchCase="uploadContentMode.CUSTOM">
      <lv-tooltip class="lv-custom-tooltip" [lvContent]="fileLimitTip">
        <ng-container *ngTemplateOutlet="lvContentTemplate; context: { $implicit: lvFiles }"></ng-container>
      </lv-tooltip>
    </ng-container>

    <!-- 默认选择 -->
    <ng-container *ngSwitchDefault>
      <!--未配置LvGutter时border-radius会被gutter覆盖，故配置lvGutter为0-->
      <lv-group lvGutter="0" class="lv-fileupload-main">
        <div
          class="lv-fileupload-content"
          [lv-tooltip]="fileLimitTip"
          (click)="selectFile($event)"
          [ngClass]="{ 'lv-fileupload-content-disabled': lvDisabled }"
        >
          <!-- 没数据placeholder -->
          <div *ngIf="!lvFiles?.length" class="lv-fileupload-null">{{ lvPlaceholder }}</div>

          <!-- 有数据 -->
          <ng-container *ngTemplateOutlet="fileList"></ng-container>

          <!-- 选择按钮 -->
          <div class="lv-fileupload-add" [ngClass]="{ 'lv-fileupload-add-disabled': lvDisabled }">
            <i lv-icon="lv-icon-select-file" [lvDisabled]="lvDisabled"></i>
          </div>
        </div>
        <button
          class="lv-fileupload-op"
          [lvSize]="lvSize"
          [disabled]="lvDisabled || isProgress || !isUpload()"
          lv-button
          *ngIf="!lvAutoUpload && lvShowUpload"
          (click)="uploadFiles()"
        >
          {{ uploadBth }}
        </button>
      </lv-group>
    </ng-container>
  </div>
  <!-- 在表单下方中显示错误信息 -->
  <div
    *ngIf="lvUploadErrorMessage && (uploadProcess$ | async) === uploadStatusEnum.ERROR"
    class="lv-fileupload-error-message"
  >
    {{ lvUploadErrorMessage }}
  </div>
</ng-container>

<!-- file -->
<input
  #fileInput
  type="file"
  [multiple]="lvMultiple"
  [attr.accept]="lvAccept"
  [attr.disabled]="lvDisabled ? 'disabled' : null"
  (change)="fileChange($event)"
  style="display: none"
/>

<!-- fileItem -->
<ng-template #fileList>
  <div class="lv-fileupload-list" *ngIf="lvFiles?.length">
    <div
      *ngFor="let item of lvFiles"
      class="lv-fileupload-cell"
      [ngClass]="{
        'lv-fileupload-cell-error': item.status === uploadFileStatusEnum.ERROR,
        'lv-fileupload-multiple': lvMultiple
      }"
    >
      <div
        *ngIf="item.status === uploadFileStatusEnum.PROGRESS"
        class="lv-fileupload-progress"
        [ngStyle]="{ width: item.progress + '%' }"
      ></div>
      <div class="lv-fileupload-file">
        <div class="lv-fileupload-filename" lv-overflow>{{ item.name }}</div>
        <div class="lv-fileupload-fileunit">({{ item.fileSize }})</div>
      </div>

      <!-- 额外信息 -->
      <ng-container [ngSwitch]="true">
        <div *ngSwitchCase="TypeUtils.isRealString(lvExtra)">{{ lvExtra }}</div>
        <ng-container *ngSwitchCase="TypeUtils.isTemplateRef(lvExtra)">
          <ng-container *ngTemplateOutlet="lvExtra; context: { $implicit: item }"></ng-container>
        </ng-container>
      </ng-container>

      <!-- 操作按钮 -->
      <ng-container [ngSwitch]="item.status">
        <!-- 等待中 -->
        <ng-container *ngSwitchCase="uploadFileStatusEnum.READY">
          <i
            *ngIf="lvShowRemove"
            class="lv-fileupload-icon"
            lvColorState
            lv-icon="lv-icon-clear"
            [lvDisabled]="lvDisabled"
            (click)="removeFile($event, item)"
          ></i>
        </ng-container>

        <!-- 上传中 -->
        <ng-container *ngSwitchCase="uploadFileStatusEnum.PROGRESS">
          <i
            *ngIf="lvShowRemove"
            class="lv-fileupload-icon"
            lvColorState
            lv-icon="lv-icon-clear"
            [lvDisabled]="lvDisabled"
            (click)="removeFile($event, item)"
          ></i>
        </ng-container>

        <!-- 失败,重新上传 -->
        <ng-container *ngSwitchCase="uploadFileStatusEnum.ERROR">
          <i
            class="lv-fileupload-icon"
            [lv-tooltip]="item.errorMessage || 'uploadError' | i18n"
            lvColorState
            lv-icon="lv-icon-status-failed"
            [lvDisabled]="lvDisabled"
          ></i>
          <i
            *ngIf="lvShowReupload"
            class="lv-fileupload-icon"
            lvColorState
            lv-icon="lv-icon-refresh"
            [lvDisabled]="lvDisabled"
            (click)="reUploadFile($event, item)"
          ></i>
          <i
            *ngIf="lvShowRemove"
            class="lv-fileupload-icon"
            lvColorState
            lv-icon="lv-icon-clear"
            [lvDisabled]="lvDisabled"
            (click)="removeFile($event, item)"
          ></i>
        </ng-container>

        <!-- 默认：选择、成功 -->
        <ng-container *ngSwitchDefault>
          <i class="lv-fileupload-icon" lv-icon="lv-icon-status-succeed" [lvDisabled]="lvDisabled"></i>
          <i
            *ngIf="lvShowRemove"
            class="lv-fileupload-icon"
            lvColorState
            lv-icon="lv-icon-clear"
            [lvDisabled]="lvDisabled"
            (click)="removeFile($event, item)"
          ></i>
        </ng-container>
      </ng-container>
    </div>
  </div>
</ng-template>

<!-- pictureFileItem -->
<ng-template #pictureFileList>
  <div class="lv-fileupload-picture-list" *ngIf="lvFiles?.length">
    <div
      *ngFor="let item of lvFiles"
      class="lv-fileupload-picture-item"
      [ngClass]="{
        'lv-fileupload-picture-item-error': item.status === uploadFileStatusEnum.ERROR,
        'lv-fileupload-picture-item-progress': item.status === uploadFileStatusEnum.PROGRESS
      }"
    >
      <div
        *ngIf="item.status === uploadFileStatusEnum.SUCCESS || item.status === uploadFileStatusEnum.ERROR"
        class="lv-fileupload-picture-item-action"
      >
        <lv-group lvGutter="8px">
          <button lv-button [disabled]="lvDisabled" *ngIf="item.status === uploadFileStatusEnum.SUCCESS">
            <i class="lv-fileupload-picture-icon" lv-icon="lv-icon-eye" lvColorState></i>
          </button>
          <button
            lv-button
            [disabled]="lvDisabled"
            *ngIf="item.status === uploadFileStatusEnum.ERROR"
            (click)="reUploadFile($event, item)"
          >
            <i class="lv-fileupload-picture-icon" lv-icon="lv-icon-refresh" lvColorState></i>
          </button>
          <button lv-button [disabled]="lvDisabled" (click)="removeFile($event, item)">
            <i class="lv-fileupload-picture-icon" lv-icon="icon-delete" lvColorState></i>
          </button>
        </lv-group>
      </div>
      <div *ngIf="item.status === uploadFileStatusEnum.SUCCESS" class="lv-fileupload-picture-item-thumbnail">
        <img class="lv-fileupload-picture-item-image" [src]="item.url" [alt]="item.name" />
      </div>
      <div *ngIf="item.status === uploadFileStatusEnum.PROGRESS">
        <img class="lv-fileupload-picture-icon" src="{{ assetsPrefixPath }}assets/webp/gray.png" alt="icon-loading" />
        <div>{{ item.progress ? item.progress : '0' + '%' }}</div>
      </div>
      <ng-container *ngIf="item.status === uploadFileStatusEnum.ERROR">
        <i
          class="lv-fileupload-picture-icon"
          [lv-tooltip]="item.errorMessage || 'uploadError' | i18n"
          lvColorState
          lv-icon="lv-icon-status-failed"
          [lvDisabled]="lvDisabled"
        ></i>
        <span>{{ 'uploadError' | i18n }}</span>
      </ng-container>
    </div>
  </div>
</ng-template>
